<template>
  <el-menu
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    background-color="#1f3151"
    router
    :default-active="$route.path"
    text-color="#f5f5f5"
    :unique-opened="true"
    active-text-color="#409EFF"
  >
    <!-- 首页 -->
    <el-menu-item index="/home/main">
      <el-icon>
        <HomeFilled />
      </el-icon>
      <template #title>后台首页</template>
    </el-menu-item>

    <!-- 管理员页面 -->
    <el-sub-menu index="/home/admin">
      <template #title>
        <el-icon>
          <Tools />
        </el-icon>
        <span>后台管理</span>
      </template>

      <el-menu-item index="/home/admin/admin-main">
        <el-icon>
          <GoldMedal />
        </el-icon>
        <span>主管理员</span>
      </el-menu-item>
      <el-menu-item index="/home/admin/admin-else">
        <el-icon>
          <Medal />
        </el-icon>
        <span>分管理员</span>
      </el-menu-item>
    </el-sub-menu>

    <!-- 页面管理 -->
    <el-sub-menu index="/home/page">
      <template #title>
        <el-icon>
          <Platform />
        </el-icon>
        <span>页面管理</span>
      </template>

      <el-menu-item index="/home/page/page-front">
        <el-icon>
          <Monitor />
        </el-icon>
        <span>首页管理</span>
      </el-menu-item>
      <el-menu-item index="/home/page/page-center">
        <el-icon>
          <User />
        </el-icon>
        <span>个人页面</span>
      </el-menu-item>
    </el-sub-menu>

    <!-- 图书管理 -->
    <el-sub-menu index="/home/article">
      <template #title>
        <el-icon>
          <List />
        </el-icon>
        <span>图书管理</span>
      </template>

      <el-menu-item index="/home/article/article-list">
        <el-icon>
          <DocumentCopy />
        </el-icon>
        <span>图书列表</span>
      </el-menu-item>
      <el-menu-item index="/home/article/article-classify">
        <el-icon>
          <CollectionTag />
        </el-icon>
        <span>类别管理</span>
      </el-menu-item>
      <el-menu-item index="/home/article/article-push">
        <el-icon>
          <EditPen />
        </el-icon>
        <span>发布图书</span>
      </el-menu-item>
    </el-sub-menu>

    <!-- 动态页面 -->
    <el-sub-menu index="/home/talk">
      <template #title>
        <el-icon>
          <Promotion />
        </el-icon>
        <span>动态管理</span>
      </template>

      <el-menu-item index="/home/talk/talk-push">
        <el-icon>
          <Edit />
        </el-icon>
        <span>发表动态</span>
      </el-menu-item>
      <el-menu-item index="/home/talk/talk-list">
        <el-icon>
          <Tickets />
        </el-icon>
        <span>动态列表</span>
      </el-menu-item>
    </el-sub-menu>

    <!-- 用户管理 -->
    <el-menu-item index="/home/font-user">
      <el-icon>
        <Avatar />
      </el-icon>
      <template #title>用户管理</template>
    </el-menu-item>

    <!-- 留言管理 -->
    <el-menu-item index="/home/message">
      <el-icon>
        <ChatRound />
      </el-icon>
      <template #title>留言管理</template>
    </el-menu-item>

    <!-- 评论管理 -->
    <el-menu-item index="/home/comment">
      <el-icon>
        <Comment />
      </el-icon>
      <template #title>评论管理</template>
    </el-menu-item>

    <!-- 个人页面 -->
    <el-menu-item index="/home/center">
      <el-icon>
        <UserFilled />
      </el-icon>
      <template #title>个人中心</template>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'
import {
  HomeFilled,
  UserFilled,
  Tools,
  GoldMedal,
  Medal,
  EditPen,
  Promotion,
  Edit,
  Tickets,
  Platform,
  Monitor,
  User,
  List,
  DocumentCopy,
  CollectionTag,
  Avatar,
  ChatRound,
  Comment,
} from '@element-plus/icons-vue'

const props = defineProps({
  isCollapse: Boolean,
})
</script>

<style lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}

.el-aside {
  position: sticky;
  top: 0;
  left: 0;
  background-color: #1f3151;
  height: 100vh;
}

.el-menu {
  border: 0;
}
</style>
